import { StackNavigator, TabNavigator } from 'react-navigation';
import React, { Component } from 'react';
import { TextInput, Button, Picker, Platform,Dimensions, StyleSheet, Text, View, Image, TouchableHighlight, ScrollView, ViewPagerAndroid, FlatList } from 'react-native';
import DatePicker from 'react-native-datepicker';
import NetUtils from './NetUtils';
var {width, height} = Dimensions.get('window');
import Storage from 'react-native-storage';
import { AsyncStorage } from 'react-native';
import storage from './LoginPage'
var username;
var password;
var url = 'http://119.29.13.173:8000/api';
var opts ={};

class NewGoalScreen extends React.Component {
    constructor(props) {
        super(props);
        var curDate = new Date();
        var endDate = new Date();
        endDate.setDate(curDate.getDate() + 7);
        this.state = {
        	t1:'',
        	t2:'',
        	t3:'',
            goalSize: "small",
            goalType: "health",
            last: 7,
            stepCount: 1,
            frequency: 1,
            curTime: curDate,
            strTime: curDate,
            endTime: endDate,
            goalName: "",
            step: [{
                no: 1,
                last: 7,
                goalName: '',
                goalContent: '',
                frequency: 1,
                strTime: curDate,
                endTime: endDate,
            }, ],

        };
    }

    static navigationOptions = {
        headerStyle: {
            backgroundColor: '#2196F7',
        },
        headerTintColor: 'white',
    };


    onSummit = () =>{
    	
    	var valid = true;
    	opts.goalType = this.state.goalType;
    	opts.goalTitle = this.state.goalName;
    	if (opts.goalTitle === '')
    	{
    		valid = false;
    	}
    	opts.days = this.state.last;
    	opts.beginDate = this.getDateFormat(this.state.strTime);
        opts.endDate = this.getDateFormat(this.state.endTime);
        opts.subTaskList = [];
        for (var i in this.state.step)
        {
        	opts.subTaskList.push({
        	        			step:this.state.step[i].no,
        	        			days:this.state.step[i].last,
        	        			taskTitle:this.state.step[i].goalName,
        	        			taskContent: this.state.step[i].goalContent,
        	        			frequency:this.state.step[i].frequency,
        	        			beginDate:this.getDateFormat(this.state.step[i].strTime),
        	        			endDate:this.getDateFormat(this.state.step[i].endTime),
        	        		});
        	if (this.state.step[i].goalName === '' || this.state.step[i].goalContent === '')
    	{
    		valid = false;
    		break;
    	}
        }
        if (valid)
        {
        	var service = 'new_goal';
         NetUtils.post(url, service, opts, (data) => {});
        alert("建立新目标！");
        const {navigate} = this.props.navigation;
        navigate('Main');
        }
        else {
        	alert('可能存在空值!');
        }
    };

    getDateFormat = (dates)=>{
    	
        var space = "-";
        var years = dates.getFullYear();
        var months = dates.getMonth()+1;
        if(months<10){
            months = "0"+months;
        }

        let d = dates.getDate();
        if( d < 10){
            d = "0"+ d;
        };
        var time = years+space+months+space+d;
        return time;
        
    };


    render() {
        //小目标阶段页面
        var smallGoalStepPage = (
                <View style={{
                    flex: 1,
                    width:width*0.8
                }}>
                        <View style ={{
                    flexDirection: 'row',
                    alignItems: 'center',
                    justifyContent: 'center',
                    flex:1,
                }}>
                        <Picker
                style={{
                    backgroundColor: "#eee",
                    color: "#7f7f7f",
                    height: 40,
                    width: 100,
                    flex:1,
                }}
                mode="dropdown"
                selectedValue={this.state.frequency}
                onValueChange={(fre) => this.setState({
                    frequency: fre
                })}>
                                  <Picker.Item label="每天" value="1" />
                                  <Picker.Item label="每两天" value="2" />
                                  <Picker.Item label="每三天" value="3" />
                                  <Picker.Item label="每五天" value="5" />
                                  <Picker.Item label="每周" value="7" />
                                  <Picker.Item label="每半月" value="15" />
                                  <Picker.Item label="每月" value="30" />
                                </Picker>
                                <TextInput
                keyboardType = "default"
                underlineColorAndroid="transparent"
                placeholder="输入目标内容"
                style={{
                    flex:1,
                    height: 40,
                    borderColor: '#ddd',
                    borderWidth: 1,
                    backgroundColor: 'white',
                    width: 200,
                    height: 40,
                    margin: 5,
                }}
                onChangeText={(text) => {let step = this.state.step;
                            step[0].goalContent = text;
                            step[0].goalName = text;
                            this.setState({
                            goalName: text,
                            step:step})}}
                value={this.state.goalName}
                />
                        </View>
                        <View style ={{
                    flexDirection: 'row',
                    alignItems: 'center',
                    justifyContent: 'center',
                    flex:1,
                }}>
                        <Text style ={styles.labelText}>持续</Text>
                            <Picker
                style={{
                    backgroundColor: "#eee",
                    color: "#7f7f7f",
                    width: 200,
                    height: 40,
                    margin: 10,
                }}
                mode="dropdown"
                selectedValue={this.state.last}
                onValueChange={(l) => {
                    let ed = new Date(this.state.strTime.getFullYear(),this.state.strTime.getMonth()-1,this.state.strTime.getDate());
                    console.log(ed);
                    ed.setDate(this.state.strTime.getDate() + l);
                    console.log(ed);
                    let step = this.state.step;
                    step[0].last = l;
                    this.setState({
                        last: l,
                        endTime: ed,
                        step:step,
                    })
                }}>
                                      <Picker.Item label="一周" value={7} />
                                      <Picker.Item label="21天" value={21} />
                                      <Picker.Item label="一月" value={30} />
                                      <Picker.Item label="三个月" value={90} />
                                      <Picker.Item label="一年" value={365} />
                                      <Picker.Item label="两年" value={730} />
                                      <Picker.Item label="三年" value={1095} />
                            </Picker>
                        </View>
                        <View style ={{
                    flexDirection: 'row',
                    alignItems: 'center',
                    justifyContent: 'center',
                    flex:1,
                }}>
                <View style ={{
                    flexDirection: 'row',
                    alignItems: 'center',
                    justifyContent: 'center',
                    flex:1,
                }}>
                        <Text style ={styles.labelText}>起</Text>
                            <DatePicker
                style={{
                    height: 40,
                    width: 100,
                    margin:5,
                }}
                date={this.getDateFormat(this.state.strTime)}
                showIcon={false}
                mode="date"
                placeholder="select date"
                format="YYYY-MM-DD"
                minDate={this.getDateFormat(this.state.curTime)}
                maxDate={(this.state.curTime.getFullYear() + 1).toString() + "-" + (this.state.curTime.getMonth() + 1).toString() + "-" + this.state.curTime.getDate().toString()}
                confirmBtnText="Confirm"
                cancelBtnText="Cancel"
                customStyles={{
                    dateInput: {
                        backgroundColor: "white"
                    }
                }}
                onDateChange={(date) => {
                    let d = date.split("-");
                    let dd = new Date(parseInt(d[0]), parseInt(d[1]) - 1, parseInt(d[2]));
                    let ed = new Date(parseInt(d[0]), parseInt(d[1]) - 1, parseInt(d[2]));
                    ed.setDate(dd.getDate() + this.state.last);
                    let step = this.state.step;
                    step[0].strTime = dd;
                    step[0].endTime =ed;
                    this.setState({
                        date: date,
                        strTime: dd,
                        endTime: ed,
                        step:step,
                    });
                }}
                />
                </View>
                <View style ={{
                    flexDirection: 'row',
                    alignItems: 'center',
                    justifyContent: 'center',
                    flex:1,
                }}>
                            <Text style ={styles.labelText}>止</Text>
                            <DatePicker
                style={{
                    height: 40,
                    width: 100,
                    margin:5,
                }}
                date={this.getDateFormat(this.state.endTime)}
                showIcon={false}
                mode="date"
                placeholder="select date"
                format="YYYY-MM-DD"
                minDate={(this.state.curTime.getFullYear()).toString() + "-" + (this.state.curTime.getMonth() + 1).toString() + "-" + this.state.curTime.getDate().toString()}
                maxDate={(this.state.endTime.getFullYear() + 5).toString() + "-" + (this.state.endTime.getMonth() + 1).toString() + "-" + this.state.endTime.getDate().toString()}
                confirmBtnText="Confirm"
                cancelBtnText="Cancel"
                customStyles={{
                    dateInput: {
                        backgroundColor: "white"
                    }
                }}
                onDateChange={(date) => {
                    let d = date.split("-");
                    let dd = new Date(parseInt(d[0]), parseInt(d[1]) - 1, parseInt(d[2]));
                    this.setState({
                        endTime: dd
                    });
                }}
                />
                        </View>
                             </View>
                            <Picker
                style={{
                    backgroundColor: "#eee",
                    color: "#7f7f7f",
                    width: 200,
                    height: 40,
                    margin: 20,
                    alignSelf:'center',
                }}
                mode="dropdown"
                placeholder="--选择预设任务方案--"
                onValueChange={(l) => {}}>
                                     <Picker.Item label="--选择预设任务方案--" value={0} />
                                      <Picker.Item label="每天-早起-21天" value={1} />
                                      <Picker.Item label="每天-运动30分钟-7天" value={2} />
                                      <Picker.Item label="每天-跑步-7天" value={3} />
                            </Picker>
                    <View style ={{
                            flex:3,
                        }} ></View>                                
                            </View>
        );
        //大目标阶段页面
        var bigGoalStepPage = (
                    <View style={{
                        flex: 1,
                        width:width*0.9
                    }}>
                    <View style ={{
                        flexDirection: 'row',
                        alignItems: 'center',
                        justifyContent: 'center',
                        flex:1,
                    }}>
                            <Picker
                    style={{
                        backgroundColor: "#eee",
                        color: "#7f7f7f",
                        height: 40,
                        width: 100,
                        flex:1,
                        margin: 5,
                    }}

                    mode="dropdown"
                    selectedValue={this.state.frequency}
                    onValueChange={(fre) => {
                            let step = this.state.step;
                            step[0].frequency = fre;
                            this.setState({
                                frequency: fre,
                                step:step
                            })}}>
                                      <Picker.Item label="每天" value="1" />
                                      <Picker.Item label="每两天" value="2" />
                                      <Picker.Item label="每三天" value="3" />
                                      <Picker.Item label="每五天" value="5" />
                                      <Picker.Item label="每周" value="7" />
                                      <Picker.Item label="每半月" value="15" />
                                      <Picker.Item label="每月" value="30" />
                                    </Picker>
                                    <TextInput
                    keyboardType = "default"
                    underlineColorAndroid="transparent"
                    placeholder="输入目标内容"
                    style={{
                        flex:1,
                        height: 40,
                        borderColor: '#ddd',
                        borderWidth: 1,
                        backgroundColor: 'white',
                        width: 200,
                        height: 40,
                        margin: 5,
                    }}
                    onChangeText={(text) =>{ 
                                let t2 = this.state.t2;
                                let t3 = this.state.t3;
                                this.setState({
                                goalName: text+t2+t3,
                                t1:text
                            })}}
                    value={this.state.t1}
                    />
                    <TextInput
                    keyboardType = "default"
                    underlineColorAndroid="transparent"
                    placeholder="(数量)"
                    style={{
                        flex:1,
                        height: 40,
                        borderColor: '#ddd',
                        borderWidth: 1,
                        backgroundColor: 'white',
                        width: 20,
                        height: 40,
                        margin: 5,
                    }}
                    onChangeText={(text) =>{ 
                                let t1 = this.state.t1;
                                let t3 = this.state.t3;
                                this.setState({
                                goalName: t1+text+t3,
                                t2:text,
                            })}}
                    value={this.state.t2}
                    />
                    <TextInput
                    keyboardType = "default"
                    underlineColorAndroid="transparent"
                    placeholder=""
                    style={{
                        flex:1,
                        height: 40,
                        borderColor: '#ddd',
                        borderWidth: 1,
                        backgroundColor: 'white',
                        width: 20,
                        height: 40,
                        margin: 5,
                    }}
                    onChangeText={(text) =>{ 
                                let t2 = this.state.t2;
                                let t1 = this.state.t1;
                                this.setState({
                                goalName: t1+t2+text,
                                t3:text,
                            })}}
                    value={this.state.t3}
                    />
                                        
                    </View>
                    <View style ={{
                            flexDirection: 'row',
                            alignItems: 'center',
                            justifyContent: 'center',
                            flex:1,
                        }}>
                        <Text style ={styles.labelText}>起</Text>
                                <DatePicker
                                    style={{
                                        height: 40,
                                        width: 100,
                                        margin:5,
                                    }}
                                    date={this.state.strTime}
                                    showIcon={false}
                                    mode="date"
                                    placeholder="select date"
                                    format="YYYY-MM-DD"
                                    minDate={this.getDateFormat(this.state.curTime)}
                                    maxDate={(this.state.curTime.getFullYear() + 1).toString() + "-" + (this.state.curTime.getMonth() + 1).toString() + "-" + this.state.curTime.getDate().toString()}
                                    confirmBtnText="Confirm"
                                    cancelBtnText="Cancel"
                                    customStyles={{
                                        dateInput: {
                                            backgroundColor: "white"
                                        }
                                    }}
                                    onDateChange={(date) => {
                                        let d = date.split("-");
                                        let dd = new Date(parseInt(d[0]), parseInt(d[1]) - 1, parseInt(d[2]));
                                        let ed = new Date(parseInt(d[0]), parseInt(d[1]) - 1, parseInt(d[2]));
                                        ed.setDate(dd.getDate() + this.state.last);
                                        this.setState({
                                            strTime: dd,
                                            endTime: ed,
                                        });
                                    }}
                                     />
                                    <Text style ={styles.labelText}>止</Text>
                    <DatePicker
                        style={{
                            height: 40,
                            width: 100,
                            margin:5,
                        }}
                        date={(this.state.endTime.getFullYear()).toString() + "-" + (this.state.endTime.getMonth() + 1).toString() + "-" + this.state.endTime.getDate().toString()}
                        showIcon={false}
                        mode="date"
                        placeholder="select date"
                        format="YYYY-MM-DD"
                        minDate={(this.state.curTime.getFullYear()).toString() + "-" + (this.state.curTime.getMonth() + 1).toString() + "-" + this.state.curTime.getDate().toString()}
                        maxDate={(this.state.curTime.getFullYear() + 5).toString() + "-" + (this.state.curTime.getMonth() + 1).toString() + "-" + this.state.curTime.getDate().toString()}
                        confirmBtnText="Confirm"
                        cancelBtnText="Cancel"
                        customStyles={{
                            dateInput: {
                                backgroundColor: "white"
                            }
                        }}
                        onDateChange={(date) => {
                            let d = date.split("-");
                            let dd = new Date(parseInt(d[0]), parseInt(d[1]) - 1, parseInt(d[2]));
                            this.setState({
                                endTime: dd
                            });
                        }}
                    />
                            
                            </View>
                             <View style ={{
                            flexDirection: 'row',
                            alignItems: 'center',
                            justifyContent: 'center',
                            flex:1,
                        }}>
                            <Text style ={styles.labelText}>阶段数</Text>
                            <Picker
                    style={{
                        backgroundColor: "#eee",
                        color: "#7f7f7f",
                        width: 100,
                        height:40,
                        margin:5,
                    }}
                    mode="dropdown"
                    selectedValue={this.state.stepCount}
                    onValueChange={(s) => {
                        if (this.state.stepCount < s) {
                            var step = this.state.step;
                            var curDate = new Date();
                            var endDate = new Date();
                            endDate.setDate(curDate.getDate() + 7);
                            for (var i = this.state.stepCount; i < s; i++) {
                                step.push({
                                    no: i + 1,
                                    last: 7,
                                    goalName: '',
                                    goalContent: '',
                                    frequency: 1,
                                    strTime: curDate,
                                    endTime: endDate,
                                });
                            }
                        } else if (this.state.stepCount > s) {
                            var step = this.state.step;
                            step = step.slice(0, s);
                        }
                        ;

                        this.setState({
                            stepCount: s,
                            step: step
                        });
                    }}>
                                      <Picker.Item label="一阶段" value={1} />
                                      <Picker.Item label="二阶段" value={2} />
                                      <Picker.Item label="三阶段" value={3} />
                                      <Picker.Item label="四阶段" value={4} />
                                      <Picker.Item label="五阶段" value={5} />
                                      <Picker.Item label="六阶段" value={6} />
                                      <Picker.Item label="七阶段" value={7} />
                                    </Picker>
                                    </View>
                                    <View style ={{
                            flex:3,
                        }} ></View>
                                </View>
        );
        var firstPage =(
            <View style ={styles.newGoalBody}>
                    <Text style ={styles.goalText}>新建目标</Text>
                    <View style={{
                        flex: 1
                    }}>
                    <Text style ={styles.labelText}>目标大小</Text>
                        <Picker
                    style={{
                        backgroundColor: "#eee",
                        color: "#7f7f7f",
                        width: 200
                    }}
                    mode="dropdown"
                    selectedValue={this.state.goalSize}
                    onValueChange={(goalS) => {
                        this.setState({
                            goalSize: goalS
                        });
                    }}>
                          <Picker.Item label="小目标" value="small" />
                          <Picker.Item label="老大不小目标" value="big" />
                        </Picker>
                    <Text style ={styles.labelText}>目标分类</Text>
                    <Picker
                    style={{
                        backgroundColor: "#eee",
                        color: "#7f7f7f"
                    }}
                    mode="dropdown"
                    selectedValue={this.state.goalType}
                    onValueChange={(goalT) => this.setState({
                        goalType: goalT
                    })}>
                          <Picker.Item label="健康" value="health" />
                          <Picker.Item label="学习" value="study" />
                          <Picker.Item label="金钱" value="money" />
                        </Picker>
                    </View>
                    <Text style ={styles.goalText}>{this.state.goalSize === "small"?"1/3":"1/4"}</Text>
                </View>
        );
        var secondPage = (
            <View style ={styles.newGoalBody}>
            <Text style ={styles.goalText}>{this.state.goalSize === "small"?"小目标":"大目标"}</Text>
            <Text style ={styles.subText}>-{gType[this.state.goalType]}生活-</Text>
            {this.state.goalSize === "small"?smallGoalStepPage:bigGoalStepPage}
            <Text style ={styles.goalText}>{this.state.goalSize === "small"?"2/3":"2/4"}</Text>
            </View>

        );
        

        //目标总结页
        var sumPage = (
        <View style ={styles.newGoalBody}>
        <View>
            <Text style ={styles.goalText}>新建目标</Text>
					<Text style ={styles.sumText}>我的目标：{this.state.goalName}</Text>
					<Text style ={styles.sumText}>目标类型：{gType[this.state.goalType]}</Text>
					<Text style ={styles.sumText}>开始日期：{this.state.strTime.getFullYear()}年{this.state.strTime.getMonth() + 1}月{this.state.strTime.getDate()}日</Text>
					<Text style ={styles.sumText}>结束日期：{this.state.endTime.getFullYear()}年{this.state.endTime.getMonth() + 1}月{this.state.endTime.getDate()}日</Text>
					{this.state.goalSize === "small"?<Text style ={styles.sumText}>时长：{this.state.last}天</Text>:null}
                    {this.state.goalSize === "small"?<Text style ={styles.sumText}>频率：每{this.state.frequency}天一打卡</Text>:null}
					<TouchableHighlight style={styles.strTimeBtn} onPress={this.onSummit} underlayColor="#2965fc">
		                <Text style={styles.strTimeBtnText}>
		                       完成
		                </Text>
		            </TouchableHighlight>
			</View>
             <Text style ={styles.goalText}>{this.state.goalSize === "small" ?"3/3":"4/4"}</Text>
            		</View>
        )

        var bigGoalStepListPage = (<View style ={styles.newGoalBody}>
            <Text style ={styles.goalText}>大目标</Text>
            <Text style ={styles.subText}>-{gType[this.state.goalType]}生活-</Text>
            <FlatList style={{
            marginTop: 20,
        }}
        data ={this.state.step}
        renderItem = {this.renderItem.bind(this)}
        keyExtractor={this._keyExtractor}
        />
            <Text style ={styles.goalText}>3/4</Text>
            </View>);
  
        return (
               <ViewPagerAndroid style={{
                flex: 1
            }} initialPage={0}
            keyboardDismissMode = "on-drag"
            onPageSelected={this.onPageSelected}
            ref={viewPager => { this.viewPager = viewPager; }}
            >
                {firstPage}
                {secondPage}
                {this.state.goalSize === "small" ?sumPage:bigGoalStepListPage}
                {this.state.goalSize === "small" ?(<View style ={styles.newGoalBody}></View>):sumPage}
            </ViewPagerAndroid>
        )
    }


    _keyExtractor = (item, index) => item.no;

    onPageSelected = (e)=>{
        if (this.state.goalSize === "small" && e.nativeEvent.position === 3)
        {
            this.viewPager.setPageWithoutAnimation(2);
        }
    }

    renderItem({item, index}) {
        return (
            <View style={{
                margin: 20,
                alignItems: "center"
            }}>
        		<Text style={styles.labelText}>阶段{item.no}</Text>
        		<Text style ={styles.labelText2}>阶段目标</Text>
					<TextInput
            keyboardType = "default"
            underlineColorAndroid="transparent"
            style={{
                height: 40,
                borderColor: '#ddd',
                borderWidth: 1,
                backgroundColor: 'white',
                width: 300,
            }}
            onChangeText={(text) => {
                step = this.state.step;
                step[index].goalName = text;
                this.setState({
                    step: step
                })
            }}
            value={this.state.step[index].goalName}
            />
		        <Text style ={styles.labelText2}>阶段内容</Text>
					<TextInput
            keyboardType = "default"
            underlineColorAndroid="transparent"
            style={{
                height: 40,
                borderColor: '#ddd',
                borderWidth: 1,
                backgroundColor: 'white',
                width: 300,
            }}
            onChangeText={(text) => {
                step = this.state.step;
                step[index].goalContent = text;
                this.setState({
                    step: step
                })
            }}
            value={this.state.step[index].goalContent}
            />
				<Text style={styles.labelText2}>持续时长</Text>
				<Picker
            style={{
                backgroundColor: "#eee",
                color: "#7f7f7f",
                width: 200
            }}
            mode="dropdown"
            selectedValue={item.last}
            onValueChange={(l) => {
                let step = this.state.step;
                let ed = new Date();
                ed.setDate(step[index].strTime.getDate() + l);
                step[index].last = l;
                step[index].endTime = ed,
                this.setState({
                    step: step
                })
            }}>
						  <Picker.Item label="一周" value={7} />
						  <Picker.Item label="21天" value={21} />
						  <Picker.Item label="一月" value={30} />
						  <Picker.Item label="三个月" value={90} />
						  <Picker.Item label="一年" value={365} />
						  <Picker.Item label="两年" value={730} />
						  <Picker.Item label="三年" value={1095} />
					</Picker>
				<Text style ={styles.labelText2}>阶段开始时间</Text>
					<DatePicker
            style={{
                height: 40,
                width: 200
            }}
            date={item.strTime.getFullYear().toString() + "-" + (item.strTime.getMonth() + 1).toString() + "-" + item.strTime.getDate().toString()}
            showIcon={false}
            mode="date"
            placeholder="select date"
            format="YYYY-MM-DD"
            minDate={this.state.date}
            maxDate={(this.state.strTime.getFullYear() + 1).toString() + "-" + (this.state.strTime.getMonth() + 1).toString() + "-" + this.state.strTime.getDate().toString()}
            confirmBtnText="Confirm"
            cancelBtnText="Cancel"
            customStyles={{
                dateInput: {
                    backgroundColor: "white"
                }
            }}
            onDateChange={(date) => {
                let d = date.split("-");
                let step = this.state.step;
                step[index].strTime = new Date(parseInt(d[0]), parseInt(d[1]) - 1, parseInt(d[2]));
                step[index].endTime = new Date(parseInt(d[0]), parseInt(d[1]) - 1, parseInt(d[2]));
                step[index].endTime.setDate(step[index].endTime.getDate() + step[index].last);
                this.setState({
                    step: step
                });
            }}
            />
		      		<Text style ={styles.labelText2}>阶段结束时间</Text>
		      		<DatePicker
            style={{
                height: 40,
                width: 200
            }}
            date={(item.endTime.getFullYear()).toString() + "-" + (item.endTime.getMonth() + 1).toString() + "-" + item.endTime.getDate().toString()}
            showIcon={false}
            mode="date"
            placeholder="select date"
            format="YYYY-MM-DD"
            minDate={this.getDateFormat(item.strTime)}
            maxDate={(item.strTime.getFullYear() + 5).toString() + "-" + (item.strTime.getMonth() + 1).toString() + "-" + item.strTime.getDate().toString()}
            confirmBtnText="Confirm"
            cancelBtnText="Cancel"
            customStyles={{
                dateInput: {
                    backgroundColor: "white"
                }
            }}
            onDateChange={(date) => {
                let d = date.split("-");
                let step = this.state.step;
                step[index].endTime = new Date(parseInt(d[0]), parseInt(d[1]) - 1, parseInt(d[2]));
                this.setState({
                    step: step
                });
            }}
            />
		      		<Text style ={styles.labelText2}>频率</Text>
						<Picker
            style={{
                backgroundColor: "#eee",
                color: "#7f7f7f",
                width: 200
            }}
            mode="dropdown"
            selectedValue={item.frequency}
            onValueChange={(fre) => {
                let step = this.state.step;
                step[index].frequency = fre;
                this.setState({
                    step: step
                });
            }}>
						  <Picker.Item label="每天" value="1" />
						  <Picker.Item label="两天一次" value="2" />
						  <Picker.Item label="三天一次" value="3" />
						  <Picker.Item label="五天一次" value="5" />
						  <Picker.Item label="每周一次" value="7" />
						  <Picker.Item label="半月一次" value="15" />
						  <Picker.Item label="每月一次" value="30" />
						</Picker>
			</View>
        )
    }
    //绘制列表的分割线
    renderItemSeparator() {}


}

export default NewGoalScreen;

const gType = {
    "health": "健康",
    "money": "金钱",
    "study": "学习",
};

const styles = StyleSheet.create({
    newGoalBody: {
        alignItems: 'center',
        backgroundColor: '#2196F7',
    },
    goalText: {
        color: 'white',
        fontSize: 28,
        margin: 30,
        marginBottom: 5,
    },
    subText: {
        color: 'white',
        fontSize: 18,
        margin: 5,
        marginBottom: 30,
    },
    strTimeBtn: {
        height: 40,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: 'white'
    },
    helpBtn: {
        margin: 10,
        height: 40,
        width: 40,
        borderRadius: 20,
        alignSelf: 'center',
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: 'white'
    },
    strTimeBtnText: {
        color: '#7f7f7f',
        fontSize: 15,
    },
    labelText: {
        alignSelf: 'center',
        color: 'white',
        fontSize: 20,
        marginTop: 35,
        marginBottom: 25,
    },
    labelText2: {
        alignSelf: 'center',
        color: 'white',
        fontSize: 15,
        marginTop: 20,
        marginBottom: 15,
    },
    sumText: {
        alignSelf: 'flex-start',
        color: 'white',
        fontSize: 20,
        margin: 10,
    },
    sumText2: {
        alignSelf: 'flex-start',
        color: 'white',
        margin: 2,
    }
});

